<script lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from "element-plus";
import AccountManagement from "@/items/account_setting_items/AccountManagement.vue";
import Preferences from "@/items/account_setting_items/Preferences.vue";
import Profile from "@/items/account_setting_items/Profile.vue";
import SecurityLog from "@/items/account_setting_items/SecurityLog.vue";

import { Document, Files, Notebook, PictureRounded } from '@element-plus/icons-vue';

export default {
  components: {
    AccountManagement,
    Preferences,
    Profile,
    SecurityLog,
    Files,
    Notebook,
    PictureRounded,
    Document
  },
  setup() {
    const router = useRouter();
    const currentMenu = ref("1"); // 初始值设置为默认的激活菜单

    const logout = () => {
      const formData = new FormData();
      formData.append('key', localStorage.getItem('key'));

      fetch('https://movie.cpb2013.top/admin/login.php?mode=logout', { method: 'POST', body: formData })
          .then(response => response.json())
          .then(data => {
            localStorage.removeItem('name');
            localStorage.removeItem('key');
            ElMessage({
              type: 'success',
              message: '登出成功',
            });
            router.push('/login');
          })
          .catch(error => {
            ElMessage({
              type: 'error',
              message: '登出失败',
            });
            console.error('登出请求失败:', error);
          })
    };

    return {
      currentMenu,
      logout,
      handleMenuSelect: (index) => {
        currentMenu.value = index;
        console.log(currentMenu.value);
      },
      handleOpen: (key, keyPath) => {
        console.log(key, keyPath);
      },
      handleClose: (key, keyPath) => {
        console.log(key, keyPath);
      },
      toMain: () => {
        router.push({ path: '/' });
      }
    };
  }
};
</script>

<template>
  <el-row>
    <el-col :span="4">
      <el-scrollbar height="700px">
        <view class="menu_title" @click="toMain">
<!--          <el-image style="width: 48px; height: 48px;border-radius: 30px;margin-right: 10px" src="/logo.jpg" />-->
<!--          <view>PiliPili Admin</view>-->
          <font-awesome-icon :icon="['fas', 'circle-arrow-left']" style="color: #afafaf;margin-right: 10px" size="xl" />
          <span class="ml-2">返回</span>
        </view>
<!--        <div class="flex items-center menu_back">-->
<!--          <font-awesome-icon :icon="['fas', 'circle-arrow-left']" style="color: #afafaf;margin-right: 10px" size="xl" />-->
<!--          <span class="ml-2">返回</span>-->
<!--        </div>-->
        <el-menu
            :default-active="currentMenu"
            class="el-menu-vertical-demo"
            @select="handleMenuSelect"
            @open="handleOpen"
            @close="handleClose"
            unique-opened
        >
          <el-menu-item index="1"><font-awesome-icon :icon="['fas', 'user']" style="color: #afafaf;margin-right: 10px" size="xl" />个人信息</el-menu-item>
          <el-menu-item index="2"><font-awesome-icon :icon="['fas', 'gear']" style="color: #afafaf;margin-right: 10px" size="xl" />偏好设置</el-menu-item>
          <el-menu-item index="3"><font-awesome-icon :icon="['fas', 'table-list']" style="color: #afafaf;margin-right: 10px" size="xl" />安全日志</el-menu-item>
          <el-menu-item index="4"><font-awesome-icon :icon="['fas', 'newspaper']" style="color: #afafaf;margin-right: 10px" size="xl" />账户管理</el-menu-item>
          <el-menu-item index="5" @click="logout"><font-awesome-icon :icon="['fas', 'right-from-bracket']" size="xl" style="color: #afafaf;margin-right: 10px"/>退出</el-menu-item>


        </el-menu>
      </el-scrollbar>
    </el-col>

    <el-col :span="20">
      <view class="main_right">
        <view class="main_right_items">
          <view v-if="currentMenu === '1'">
            <Profile></Profile>
          </view>
          <view v-else-if="currentMenu === '2'">
            <preferences></preferences>
          </view>
          <view v-else-if="currentMenu === '3'">
            <SecurityLog></SecurityLog>
          </view>
          <view v-else-if="currentMenu === '4'">
            <AccountManagement></AccountManagement>
          </view>
        </view>
      </view>
    </el-col>
  </el-row>
</template>

<style scoped>
.menu_back
{
  padding: 10px 0 10px 30px;
  height: 30px;
  display: flex;
  color: black;
  justify-content: left;
  max-width: 100%;
}
.menu_title
{
  display: flex;
  max-width: 100%;
  height: 60px;
  align-items: center;
  color: black;
  font-weight: 800;
  font-size: 18px;
  justify-content: left;
  padding-left: 30px;
  user-select: none; /* 禁止选中 */
  cursor: pointer; /* 鼠标悬浮时显示指针 */
}
.el-menu-item
{
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 10px;
}
.el-menu-item.is-active
{
  color: white;
  background-color: #24a7f3;
}
.el-menu-item:hover
{
  background-color: #f3f3f3;
}
.el-sub-menu
{
  margin-left: 15px;
  margin-right: 15px;
}
.main_right_items
{
  padding-top: 10px;
  display: block;
  width: 80%;
}
.main_right
{
  display: flex;
  width: 100%;
  justify-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
}
</style>